<template>
	<div class="container">
		<el-form :model="form" ref="ruleForm" label-position="left" :rules="rules" label-width="100px">
			<el-form-item label="小程序名称" prop="app_name" ref="app_name">
				<el-input v-model="form.app_name" placeholder="小程序名称"></el-input>
			</el-form-item>
			<el-form-item label="AppId" prop="app_id" ref="app_id">
				<el-input v-model="form.app_id" placeholder="AppId"></el-input>
			</el-form-item>
			<el-form-item label="小程序icon" prop="app_logo" ref="app_logo">
				<vk-data-upload v-model="form.app_logo" :limit="1" :image-styles="imgStyle"></vk-data-upload>
			</el-form-item>
			<el-form-item label="排序">
				<el-input v-model.number="form.sort" type="number" min="0"></el-input>
				<div class="remark_txt">数字越大，越靠前展示</div>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" class="confirm_btn" @click="submitForm('ruleForm')">确 定</el-button>
				<el-button @click="returnPage">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import bus from '@/common/bus';
	const __name = 'ny-share-app';
	export default {
		props: {

		},
		data() {
			return {
				dataId: '',
				form: {
					app_name: '',
					app_id: '',
					app_logo: null,
					sort: 0,
				},
				rules: {
					app_name: [{
						required: true,
						message: '请输入App名称',
						trigger: 'blur'
					}],
					app_id: [{
						required: true,
						message: '请输入AppId',
						trigger: 'change'
					}],
					app_logo: [{
						required: true,
						message: '请添加图片',
						trigger: 'change'
					}]
				},
				imgStyle: {
					height: '100px',
					width: '100px'
				}
			};
		},
		mounted() {
			this.form = {
				app_name: '',
				app_id: '',
				app_logo: null,
				sort: 0,
				isEdit: false,
			}
		},
		methods: {
			editAppInfo(data) {
				this.form = data
				this.isEdit = true
			},
			submitForm(formName) {
				console.log(formName)
				var that = this
				this.$refs[formName].validate((valid, obj) => {
					if (valid) {
						console.log('---submitForm-')
						that.returnPage()
						if(this.isEdit){
							that.$emit('updateAppInfo');
						}else {
							that.$emit('addNewApp', this.form);
						}
					}
				});
			},
			imgUpload(e) {
				this.form.app_logo = e.tempFilePaths[0];
			},
			imgDelete() {
				this.imageValue = null;
				this.form.app_logo = '';
			},
			titeimgUpload(e) {
				this.form.ad_img = e.tempFilePaths[0];
			},
			titeimgDelete() {
				this.adImageValue = null;
				this.form.ad_img = '';
			},
			returnPage() {
				this.$emit('popClose');
			}
		}
	};
</script>

<style>
	.container {
		padding: 20px;
	}
</style>